<template>
   <div class="home-page">
        <section class="py-5 text-center container">
            <div class="row py-lg-5">
                <div class="col-lg-6 clo md-8 mx-auto">
                    <img src="../assets/callout.svg" alt="callout" class="w-50"/>
                    <h2 class="font-weight-light">随心写作，自由表达</h2>
                    <p>
                        <router-link to="/create" class="btn btn-primary my-2">开始写文章</router-link>
                    </p>
                </div>
            </div>
        </section>
        <!-- <uploader action="/upload" :beforeUpload="beforeUpload" @file-uploaded="onFileUploaded">
            <template #uploaded="dataProps">
                <img :src="dataProps.uploadedData.data.url" width="500"/>
            </template>
        </uploader> -->
        <h4 class="font-weight-bold text-center">发现精彩</h4>
        <column-list :list=list></column-list>
        <button
            class="btn btn-primary mt-2 mb-5 mx-auto btn-block w-25"
            @click="loadMorePage" v-if="!isLastPage"
        >
        加载更多
        </button>
    </div>
</template>
<script lang="ts">
import ColumnList from '../components/ColumnList.vue'
import {defineComponent,computed,onMounted,ref, ComputedRef} from 'vue'
import {useStore} from 'vuex'
import {GlobalDataProps,ResponseType,ImageProps} from '../store'
import useLoadMore from '../hooks/useLoadMore'
export default defineComponent({
    name:'Home',
    components:{
        ColumnList
    },
    setup(){
        const store = useStore<GlobalDataProps>()
        const list = computed(()=>store.getters.getColumns) //这里使用computed计算属性是为了当专栏值有所改变时，会重新获取
        const total = computed(()=>store.state.columns.total)//这里使用computed计算属性是为了当总数有所改变时，会重新获取
        const currentPage = computed(()=>store.state.columns.currentPage)
        const { loadMorePage,isLastPage }=useLoadMore('fetchColumns',total,'',{pageSize:6,currentPage:(currentPage.value?currentPage.value + 1:2)})
        onMounted(()=>{     //内存中的模板已挂载到了页面中
            store.dispatch('fetchColumns',{pageSize:6}) //调用actions对象里面的fetchColumns方法
        })
        /*const beforeUpload = (file:File)=>{
            const isJPG = file.type==='image/jpeg'
            if(!isJPG){
                createMessage('上传图片只能是 JPG 格式！','error')
            }
            return isJPG
        }
        const onFileUploaded = (rawData:ResponseType<ImageProps>)=>{
            createMessage(`上传图片 ${rawData.data._id}`,'success')
        }*/
        return{
            list,
            //beforeUpload,
            //onFileUploaded,
            loadMorePage,
            isLastPage
        }
    }
})
</script>
